<div class="bs5">
    <div class="cluster-overview-widget">
        <div class="cluster-dashboard-item-header">
            <h3><i class="icon-cluster"></i> <span>Cluster Overview</span></h3>
            <button class="btn btn-warning btn-sm" data-bind="click: remove" title="Remove widget from board">
                <i class="icon-trash"></i>
            </button>
            <button class="btn btn-default btn-sm" data-bind="click: toggleFullscreen">
                <i data-bind="css: { 'icon-fullscreen': !fullscreen(), 'icon-exit-fullscreen': fullscreen },
                          attr: { title: fullscreen() ? 'Minimize widget' : 'Maximize widget' }"></i>
            </button>
        </div>
        <div class="nodes-list p-1 gap-1 pt-0" data-bind="foreach: nodeStats">
            <div class="node-item">
                <div class="node-item-header p-3 gap-3 pb-2">
                    <div class="flex-grow">
                        <div class="node-tag">
                            <i class="icon-node-leader text-node" 
                               data-bind="attr: { class: (nodeState() ? 'text-node ' : 'text-muted ') + (nodeState() === 'Leader' ? 'icon-node-leader' : 'icon-node') }"></i> 
                            <span data-bind="text: nodeTag"></span>
                            
                        </div>
                        <div class="small-label d-flex align-items-center">
                            <span class="global-spinner spinner-xs" data-bind="css:{'hidden': nodeState()}"></span> <span data-bind="text: nodeState() ?? 'Connecting...', css: { 'text-warning' : nodeState() === 'Leader' }"></span>
                        </div>
                    </div>
                    <div class="node-type" data-bind="css:{'lazy-load': !nodeType()}">
                        <i data-bind="attr: { class: 'icon-' + iconClass(nodeType()) }"></i>
                        <div class="small-label" data-bind="text: nodeType() ?? '-'"></div>
                    </div>
                    <div class="node-os" data-toggle="tooltip" data-placement="bottom" data-bind="css:{'lazy-load': !osName()},attr: { title: osName() ?? '-', 'data-original-title': osName() ?? '-' }">
                        <i data-bind="attr: { class: osIcon() ? osIcon() : 'icon-circle' }"></i>
                        <div class="small-label" data-bind="text: osType() ?? '-'"></div>
                    </div>
                    <a class="node-url" target="_blank"
                       data-bind="attr: { href: $root.prepareUrl($data).url, title: $root.prepareUrl($data).url }, style: { 'visibility': !noData() && $root.prepareUrl($data).openInNewTab ? 'visible' : 'hidden' }">
                        <i class="icon-newtab"></i>
                        <div class="small-label">Open</div> 
                    </a>
                </div>
                <div class="node-item-details p-3 pt-2">
                    <div class="detail-item" data-bind="attr: { title: 'Start time: ' + (formattedStartTime() ?? '-') }">
                        <div class="detail-label">Uptime:</div>
                        <div class="detail-value" data-bind="css: {'lazy-load': !formattedUpTime() }">
                            <div data-bind="text: formattedUpTime() ?? '-'"></div>
                        </div>
                    </div>
                    <div class="detail-item" title="Server version">
                        <div class="detail-label">Version:</div>
                        <div class="detail-value" data-bind="css: {'lazy-load': !serverVersion() }">
                            <div data-bind="text: serverVersion() ?? '-'"></div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
